<template>
  <div>
    <div id="shadow-index" class="shadow-index">
      <canvas id="shadow-canvas"></canvas>
      <div class="login-box">
        <h3>Rick-Shadow</h3>
        <form class="login-form" autocomplete="off">
          <input autocomplete="off" class="login-input" type="text" placeholder="输入你的邮箱~" v-model="loginForm.email" />
          <input autocomplete="off" class="login-input login-pass" type="password" placeholder="输入你的密码~" v-model="loginForm.password" />
          <input class="login-button" type="button" value="sign in" @click="sign">
          <input class="login-button login-button-right" type="button" value="login in" @click="login">
        </form>
      </div>
    </div>
    <remote-script src="/static/js/draw.js"></remote-script>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      loginForm: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    login () {
      console.log(this.loginForm.email)
    },
    sign () {
    }
  }
}
</script>

<style scoped>
.shadow-index {
  position: relative;
  width: 100%;
  background: #333;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  z-index: 1;
}

.shadow-index {
  background-image: url('/static/img/demo-1-bg.jpg');
}

.login-box {
  width: 300px;
  height: 300px;
  padding: 35px;
  color: #EEE;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -250px;
}

h3 {
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
}

.login-input {
  font-family: cursive;
  font-size: 16px;
  color: #EEE;
  height: 25px;
  width: 100%;
  line-height: 1.2;
  background: transparent;
  outline: none;
  border: none;
  border-bottom: 1px solid grey;
  text-align: center;
}

.login-pass {
  margin-top: 25px;
}

.login-button {
  margin-top: 25px;
  font-size: 17px;
  font-family: cursive;
  background: transparent;
  color: #EEE;
  border-radius: 15px;
  padding: 7px;
  border: none;
}

.login-button-right {
  margin-left: 130px;
  border: 1px solid grey;
}
input:focus {
  outline: none;
}

</style>
